<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-plus"
            class="fr"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button
            v-show="false"
            size="medium"
            type="primary"
            class="fr"
            @click="handleRefreshRegion"
          >
            刷新区域
          </el-button>
          <el-button
            v-show="false"
            size="medium"
            type="primary"
             class="fr"
            @click="handleRefreshEquip"
          >
            刷新设备
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      >
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="success"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </app-table>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <devi-form
        :key="key"
        :gutter="30"
        :data="formData"
        @save="save"
        @cancel="cancel"
      ></devi-form>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { getdevice } from "@/api/device";
  import { updatearea, updatedevicelist } from "@/api/light";
  import deviForm from "./components/devi-form";
  export default {
    name: "Devicelist",
    components: { appTable, deviForm },
    data() {
      return {
        key: Math.random(),
        dialogVisible: false,
        formData: {},
        rules: {},
        base: {},
        allData: {},
        currentSelectedData: [],
        pageData: {type: -1},
        selectForm: {},
        tableColumns: [
          { prop: "code", label: "设备ID" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "类型", formatter: this.genderFormatter },
          { prop: "online", label: "是否连接", formatter: this.onlineFormatter },
          { prop: "onoff", label: "状态", formatter: this.onoffFormatter },
          { prop: "remark", label: "备注" },
        ],
        title: "添加设备",
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      handleRefreshRegion() {
        updatearea();
      },
      handleRefreshEquip() {
        updatedevicelist()
      },
      statusFormatter(row, column) {
        if (row.status == -1) {
          return "已离院";
        } else {
          return "正常";
        }
      },
      genderFormatter(row, column) {
        if (row.type == 1) {
          return "灯";
        } else if (row.type == 2) {
          return "报警器";
        } else if (row.type == 3) {
          return "门传感器";
        }
      },
      onoffFormatter(row) {
        if(row.onoff == 'off') {
          return "未连接"
        } else {
          return "已连接"
        }
      },
      onlineFormatter(row) {
        if(row.onoff == 'off') {
          return "已关"
        } else {
          return "已开"
        }
      },
      getTableData(data) {
        getdevice("get", {...data, status: 1}).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", -1);
          }
        });
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = {};
      },
      save(data) {
        this.dialogVisible = false;
        this.getTableData();
      },
      cancel() {
        this.dialogVisible = false;
      },
      edit(row) {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = Object.assign({}, row);
      },
      del(data) {
        this.$confirm("此操作将删除该改设备, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            getdevice("delete", {id: data.id}).then((resp) => {
              this.getTableData()
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      closeDialog() {
        this.dialogVisible = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      ::v-deep {
        button {
          float: left;
        }
      }
      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }
  }
</style>
